<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../static/jquery-3.6.0.js"></script>
    <link rel="stylesheet" href="../static/index.css">
</head>
<body>
<div id="col-container">
    <div id="parent">
        <ul>
            {% for node in ancestors %}
                <li><a href="?q={{ node.full_path }}+-f">{{ node.title }}</a></li>
            {% endfor %}
        </ul>
    </div>

    <div id="row-container">
        <div id="sibling">
            <ul>
                {% for node in siblings %}
                    <li><a href="?q={{ node.full_path }}+-f">{{ node.title }}</a></li>
                {% endfor %}
            </ul>
        </div>
        <div id="descendants">
            {% if not ui %}
            {% autoescape off %}
            {{ descendants }}
            {% endautoescape %}
            {% endif %}
        </div>
    </div>

    <div>
        <form action="" method="get">
            <input type="search" id="search" autocomplete="off" name="q">
            {#            <input type="search" id="search" autocomplete="off" placeholder="{{ q }}" name="q">#}
        </form>
    </div>
    <div id="nodes" data="{{ descendants }}" style="display: none"></div>
    <div id="ancestors_data" data="{{ ancestors }}" style="display: none"></div>
    <div id="calculateWidth" style="visibility: hidden"></div>
</div>

{% if ui %}
    <script src="../static/index.js"></script>
{% endif %}
<script src="../static/common.js"></script>
</body>
</html>